<template>
  <div class="Recharge">
    <div class="card">
      <img class="wenhao" src="../assets/image/wenhao.png" alt="" />
      <h2>
        <div>
          <span>
            <img src="../assets/image/jinbi.png" alt="" />
          </span>
          88888
        </div>
      </h2>
    </div>
    <div class="text">
      <div class="left">充值方式</div>
      <div class="right" @click="goldRecord">金币记录</div>
    </div>
    <div class="paychoose">
      <div class="alipay">
        <div class="left">
          <img src="../assets/image/alipay.png" alt="" />
          支付宝
        </div>
        <div class="right" @click="choosePay('1')">
          <img v-if="payType == 1" src="../assets/image/selected.png" alt="" />
          <img v-else src="../assets/image/noselected.png" alt="" />
        </div>
      </div>
      <div class="wxpay">
        <div class="left">
          <img src="../assets/image/wxpay.png" alt="" />
          微信
        </div>
        <div class="right" @click="choosePay('2')">
          <img v-if="payType == 2" src="../assets/image/selected.png" alt="" />
          <img v-else src="../assets/image/noselected.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 套餐列表 -->
    <div class="list" v-for="item in list" :key="item.id">
      <div class="left">
        <img src="../assets/image/jinbi.png" alt="" />
        {{ item.coins }}
        <span v-if="item.label">{{ item.label }}</span>
      </div>
      <div
        class="right"
        :class="{ active: item.id == id ? true : false }"
        @click="chooseId(item.id)"
      >
        ¥ {{ item.price }}
      </div>
    </div>
    <div class="btn" @click="submit">提交</div>
    <div class="foot">服务协议</div>
  </div>
</template>

<script>
import { payWebList, rechargeGold } from "@/api/reply";
export default {
  data() {
    return {
      payType: "1",
      id: "",
      list: [
        {
          id: "123",
          label: "首充特惠",
          price: "1",
          coins: "188",
        },
        {
          id: "1234",
          label: "",
          price: "10",
          coins: "1888",
        },
        {
          id: "12345",
          label: "8.8折",
          price: "88",
          coins: "18888",
        },
        {
          id: "123456",
          label: "6.6折",
          price: "666",
          coins: "188888",
        },
      ],
    };
  },
  methods: {
    choosePay(type) {
      this.payType = type;
    },
    chooseId(id) {
      this.id = id;
    },
    submit() {
      // if (!this.id) {
      //   this.$toast({
      //     message: "请选择套餐",
      //     position: "bottom",
      //   });
      //   return;
      // }
      this.$toast.loading({
        message: "加载中...",
        duration: 0,
        forbidClick: true,
      });
      rechargeGold({
        gold: 400,
        channel: parseInt(this.payType),
      }).then((res) => {
        this.$toast.clear();
        if (res.code != 0) {
          this.$toast({
            message: res.msg,
            position: "bottom",
          });
        }
        if (res.code == 0) {
          if (this.payType == 1) {
            //把订单id存在本地，支付成功页面请求刷新接口静默刷新
            localStorage.setItem("order_id", res.data.data.order_id);
            const div = document.createElement("div");
            div.innerHTML = res.data.data.order_details; //res.data是返回的表单
            document.body.appendChild(div);
            document.forms.alipaysubmit.submit();
          }
          if (this.payType == 2) {
            let url = res.data.data.order_details.mweb_url;
            console.log(url);
            window.location.href = url;
          }
        }
      });
      //   Toast.clear()
    },
    goldRecord() {
      this.$router.push("/GoldRecord");
    },
    async getList() {
      const res = await payWebList();
      console.log(res);
    },
  },
  created() {
    // this.getList();
  },
};
</script>

<style lang="less" scoped>
.Recharge {
  padding: 15px;
  .card {
    height: 88px;
    background: url(../assets/image/rechargeCard.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    padding-top: 26px;
    box-sizing: border-box;
    .wenhao {
      position: absolute;
      top: 5px;
      right: 5px;
      width: 16px;
      height: 16px;
    }
    h2 {
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: space-around;
      div {
        display: flex;
        align-items: center;
        font-size: 24px;
        font-family: Alibaba PuHuiTi;
        font-weight: bold;
        line-height: 33px;
        color: #ffffff;
        img {
          width: 30px;
          height: 30px;
          margin-right: 8px;
        }
      }
    }
  }
  .text {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 400;
    .left {
      color: #666666;
    }
    .right {
      color: #9981ed;
    }
  }
  .paychoose {
    margin-top: 10px;
    .alipay,
    .wxpay {
      padding: 17px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        align-items: center;
        font-size: 17px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 24px;
        color: #333333;
        img {
          width: 32px;
          height: 32px;
          margin-right: 10px;
        }
      }
      .right {
        img {
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }
      }
    }
  }
  .list {
    padding: 21px 9px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      line-height: 24px;
      font-size: 20px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      img {
        width: 24px;
        height: 24px;
        margin-right: 10px;
      }
      span {
        border-radius: 0px 4px 4px 4px;
        height: 16px;
        background: #ff0000;
        font-size: 10px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 16px;
        color: #ffffff;
        padding: 0 5px;
        margin-left: 5px;
      }
    }
    .right {
      width: 64px;
      height: 24px;
      border: 1px solid #9981ed;
      //   background: linear-gradient(251deg, #dd7dff 0%, #3e86ff 100%);
      opacity: 1;
      border-radius: 12px;
      text-align: center;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 24px;
      color: #9981ed;
      box-sizing: border-box;
    }
    .active {
      background: linear-gradient(251deg, #dd7dff 0%, #3e86ff 100%);
      color: #fff;
      border: none;
    }
  }
  .btn {
    margin-top: 40px;
    height: 50px;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 50px;
    color: #ffffff;
    background: #9981ed;
    border-radius: 25px;
    text-align: center;
  }
  .foot {
    margin-top: 20px;
    text-align: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 21px;
    color: #9981ed;
  }
}
</style>